
<template>
<!-- 频道编辑 -->
   <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
          <van-button  size="mini" type="info" @click="editing=!editing">
            {{editing?'取消':'编辑'}}
          </van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
        v-for="(item,index) in channels"
        :key="item.id"
        @click="hClickMyChannel(item)"
        :class="{'cur':index===activeIndex}"
        >
          <span>{{item.name}}</span>
          <van-icon name="cross" class="btn" v-show="editing && index!==0"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
        v-for="item in recommendChannels"
        @click="hAddChannel(item)"
        :key="item.id"
        >
          <span>{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
// 导入接口,获取所有频道,添加频道,删除频道
import { getAllChannels, addChannel, deleteChannel } from '@/api/channel.js'
export default {
  neme: 'ChannelEdit',
  data () {
    return {
      // 所有频道
      allChannels: [],
      // 是否处于编辑状态
      editing: false
    }
  },
  computed: {
    // 当前可选频道
    recommendChannels () {
      // allChannels 或 channels有变化就重新计算
      // 可选频道 = 所有频道 - 我的频道的数据
      return this.allChannels.filter((channel) => {
        // 过滤条件：没有在我的频道中出现
        const idx = this.channels.findIndex(item => item.id === channel.id)
        return idx === -1
      })
    }
  },
  props: {
    // 我的频道列表
    channels: {
      type: Array,
      required: true
    },
    // 父组件中选中的那个频道的下标
    activeIndex: {
      type: Number,
      required: true
    }
  },
  created () {
    this.getAllChannels()
  },
  methods: {
    async getAllChannels () {
      // 取回所有的频道
      const result = await getAllChannels()
      console.log(result)
      // 保存所有频道
      this.allChannels = result.data.data.channels
    },
    // 点击我的频道中的某一个
    async hClickMyChannel (channel) {
      if (this.editing) {
        // 如果是编辑状态，做删除频道
        const result = await deleteChannel([channel.id])
        // console.log(result)
        // 从当前频道中删除
        const index = this.channels.findIndex(item => item.id === channel.id)
        if (index !== -1) {
          this.channels.splice(index, 1)
        }
        // 删除的频道在当前频道之前，要把当前频道的下标-1
        if (index < this.activeIndex) {
          this.$emit('updateCurIndex', this.activeIndex - 1)
        }
      } else {
        // 如果是非编辑状态，修改父组件
        // 1 修改父组件index.vue中的当前频道号activeIndex
        this.$emit('updateCurChannel', channel)
        // 2 关闭弹层  修改父组件index.vue中的showChannelEdit为false
        this.$emit('close')
      }
    },
    // 添加频道去我的频道
    async hAddChannel (item) {
      // 我的频道+当前点击的可选频道 （所有频道信息）
      const allChannelNow = [...this.channels, item] // 当前所有频道信息

      const channels = allChannelNow.map((item, index) => {
        return {
          id: item.id,
          seq: index
        }
      })
      console.log(allChannelNow, channels)
      // 调用接口时，不传推荐频道
      channels.splice(0, 1)
      const result = await addChannel(channels)
      // console.log(result)
      // 直接修改父组件中的我的频道列表
      // channels是从父组件中传入的
      this.channels.push(item)
    }
  }
}
</script>

<style scoped lang='less'>
 .channel{
    padding:15px;
    font-size:14px;
  }
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
  }
  .cur {
    color: yellow;
    font-weight: 700;
  }
</style>
